import React, { useState, useEffect } from "react";
import styles from "./tab.module.less";

const _y = new Date().getFullYear();
const _m = new Date().getMonth() + 1;
const _ym = {
    y: _y,
    m: _m,
};

const Tab = (props) => {
    const { getTabProp } = props;

    const [ym, setYm] = useState(_ym);

    useEffect(() => {
        getTabProp(ym);
    }, [getTabProp, ym]);

    const pre = () => {
        const o = {};
        if (ym.m > 1) {
            o.y = ym.y;
            o.m = ym.m - 1;
        } else {
            o.y = ym.y - 1;
            o.m = 12;
        }
        setYm(o);
    };

    const next = () => {
        const o = {};
        if (ym.m < 12) {
            o.y = ym.y;
            o.m = ym.m + 1;
        } else {
            o.y = ym.y + 1;
            o.m = 1;
        }
        setYm(o);
    };

    return (
        <div className={styles.tab}>
            <div
                className={styles.left}
                onClick={() => {
                    pre();
                }}
            ></div>
            <p className={styles.inner}>
                {ym.y}年{ym.m}月
            </p>
            <div
                className={styles.rig}
                onClick={() => {
                    next();
                }}
            ></div>
            <div
                className={styles.back}
                onClick={() => {
                    setYm(_ym);
                }}
            >
                回到当前月
            </div>
        </div>
    );
};

export default Tab;
